<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Ev</title>
</head>

<body>
    <div id="demo">
    </div>
    <div id="container">
        <div id="div1"></div>
    </div>
    <style id="style">
    </style>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul,
        ol {
            list-style: none;
        }

        #demo {
            font-family: '微软雅黑';
            font-size: 18px;
            word-wrap:break-word;
        }

        #div1 {
            position: fixed;
            top: 30%;
            left: 40%;

        }

        #div1::before {
            content: '';
            display: block;
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        #div1::after {
            content: '';
            display: block;
            box-sizing: border-box;
            width: 99px;
            height: 98px;
            border-radius: 50%;
        }
        @media(max-width:500px) {
            #html {
                height: 50vh;
            }

            #div1 {
                position: absolute;
                top: 10%;
                left: 20%;
            }

            #container {
                height: 50vh;
                position: relative;
            }

        }
    </style>
    <script src="main.js"></script>
</body>

</html>